<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../script/mobileSelector/css/mpicker.css">
    <script type="text/javascript" src="../script/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/public.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <title>订餐</title>
    <style>
        html,body{width: 100%;height: 100%;}
        .mPicker-main{width: 5.12rem;height: 190px;top: 3.3rem;left: 50%;margin-left: -2.56rem;border-radius: 0.22rem;overflow: hidden;}
        .mPicker-header{display: none;}
        .mPicker-shadow{top:0rem;bottom: 0.9rem;height: calc(100% - 0.9rem);}
        .mPicker-footer{height: 40px;line-height: 40px;border-bottom: none;}
        .mPicker-active-box{width: 3.12rem;left: 1rem;margin-left: 0rem;}
    </style>
</head>
<body>
<header>
    <div class="xiaomaib">
        <div>
            <img src="../image/jiant_rg.png" alt="" onclick="open_winrs('index','index.html')">
            <p>订餐</p>
        </div>
    </div>
</header>
<section>
    <div class="list_infs">
        <ul>
            <li>
                <p>选择时间:</p>
                <input type="text" name="data" value="" placeholder="请选择时间" onclick="openDate();">
                <img src="../image/arwli.png" alt="">
            </li>
            <li>
                <p>订餐类型:</p>
                <input type="text" name="typeid" class="select-value3 form-control" value="午餐" placeholder="" >
                <!--弹窗插件-->
                <script src="../script/mobileSelector/js/json.js"></script>
                <script src="../script/mobileSelector/js/jsonExchange.js"></script>
                <script src="../script/mobileSelector/js/mPicker.min.js"></script>
                <script type="text/javascript" charset="UTF-8">
                    /*弹窗插件*/
                    var method2=$('.select-value3').mPicker({
                        level:1,
                        dataJson:level,
                        rows:3,
                        height: 50,
                        Linkage:false,
                        header:'<div class="mPicker-header"></div>',
                        idDefault:true,
                        confirm:function(json){
                            console.info('当前选中json：', json);
                        }
                    })
                </script>
                <img src="../image/arwli.png" alt="">
            </li>
        </ul>

        <span class="cust_plus">
            <em>订餐数量:</em>
            <p><em></em><input name="num" type="text" value="1"><em></em></p>
        </span>
    </div>

    <div class="infs_tij">
        <input type="button" value="提交" onclick="payment()">
    </div>
</section>
</body>
<script>

    function openDate(){
        var date = $('input[name=data]').val();

        api.openWin({
            name: 'dcdate',
            url: './xuanze_dincd.html',
            reload:true,
            pageParam: {
                dates: date
            }
        });

    }

    $(function () {

        $(".list_infs p em:nth-child(1)").click(function () {

            var min = 1;
            var num = $(this).next("input").val();;
            var tot = parseInt(num);
            if (min == num) {
                $(this).next("input").val(min);
            } else {

                $(this).next("input").val(tot - 1);
            }

            if(tot < 3){

                $(".list_infs p em:nth-child(1)").removeClass("minnub");
            }

            if(tot > 8){

                $(".list_infs p em:nth-child(3)").removeClass("maxnub");
            }

        })

        $(".list_infs p em:nth-child(3)").click(function () {
            var max = 10;
            var num =  $(this).prev("input").val();
            var tot = parseInt(num);
            if (max == num) {
                $(this).prev("input").val(max);
            } else {
                $(this).prev("input").val(tot + 1);
            }

            if(tot > 0){

                $(".list_infs p em:nth-child(1)").addClass("minnub");
            }

            if(tot > 8){

                console.log(tot);
                $(".list_infs p em:nth-child(3)").addClass("maxnub");
            }
        })


    })
</script>
<script type="text/javascript">
    window['adaptive'].desinWidth = 750;
    window['adaptive'].baseFont = 28;
    window['adaptive'].maxWidth = 750;
    window['adaptive'].init();

    apiready = function () {
        $api.fixStatusBar($api.dom('.header'));
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err){
            api.closeWidget();
        }); 

        var params = api.pageParam;  //获取参数

        $('input[name=data]').val(params.dates);


    }

    //提交
    function payment(){
        var did = api.deviceId;
        var data = $('input[name=data]').val();
        var typeid = $('input[name=typeid]').val();
        var num = $('input[name=num]').val();
        if (data == '') {
            api.alert({msg:'请选择订餐时间'});return;
        }else if (typeid == '') {
            api.alert({msg:'请选择订餐类型'});return;
        }else if (num == ''){
            api.alert({msg:'请选择订餐数量'});return;
        }
        var p = {uid:id,data:data,typeid:typeid,num:num,did:did};
        api.ajax({
            url:webSiteUrl+'/App/Record/reserve',
            method:'post',
            data:{
                values:p
            }
        },function(ret,err){
            if(ret.code == 200){
                api.openWin({
                    name: 'zhifu',
                    url: './yudin_ceg.html',
                    reload:true,
                    pageParam: {
                        balance: ret.data.balance,
                        total:ret.data.total
                    }
                });
            }else{
                alert(ret.msg);
            }
        });

        
    }
</script>
</html>